#{extends 'main_adm.html' /}
#{set title:'Cadastro de Fornecedor' /}
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>Cadastro</title>
  <meta name="author" content="Jake Rocheleau">
  
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/main.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_style.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_responsive.css'}">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
   
  <script type="text/javascript" src="@{'public/javascripts/jquery.min.js'}"></script>
  <script type="text/javascript" src="@{'public/javascripts/jquery.maskedinput-1.3.min.js'}"></script>
  <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 

</head>

<body>

<section id="container">

    <h2>Cadastro - Fornecedor</h2>
    
        #{ifErrors}
        <h1>Ops...Alguns erros foram encontrados</h1>
        #{/ifErrors}
        
    
    #{form @salvarCadastro(), name:'form_cadFornecedor', id:'form_cadFornecedor'}

    <div id="wrapping" class="clearfix">
        <section id="aligned">
        <h3>Dados do Fornecedor:</h3>
   
        
        #{field 'fornecedor.nome'}
            <p class="${field.errorClass}">
                <input type="text" name="${field.name}" value="${fornecedor?.nome}" id="nome" placeholder="Nome" autocomplete="off" class="txtinput" required>
                <span class="error">${field.error}</span>
            </p>
        #{/field}   
                                
        #{field 'fornecedor.telefone1'}
            <p class="${field.errorClass}">
                <input type="tel" name="${field.name}" value="${fornecedor?.telefone1}"  id="telefone1" placeholder="Telefone(1): (ddd)xxxx-xxxx" class="txtinput" required>
                <span class="error">${field.error}</span>
            </p>
        #{/field}            
        
        #{field 'fornecedor.telefone2'}
            <p class="${field.errorClass}">
                <input type="tel" name="${field.name}" value="${fornecedor?.telefone2}"  id="telefone2" placeholder="Telefone(2)" class="txtinput"> 
                <span class="error">${field.error}</span>
            </p>
        #{/field}            
        
        #{field 'fornecedor.email'}
            <p class="${field.errorClass}">
                <input type="email" name="${field.name}" value="${fornecedor?.email}" id="email" placeholder="Endereço de E-Mail: (ex.)xxx@xxx.com" autocomplete="off" class="txtinput" required>
                <span class="error">${field.error}</span>
            </p>
        #{/field}            
        <h3>Endereço:</h3>   
        
        #{field 'endereco.cidade'}
            <p class="${field.errorClass}">
                <input type="text" name="${field.name}" value="${endereco?.bairro}" id="cidade" placeholder="Cidade" autocomplete="off" class="caixaMedia" required>
                <span class="error">${field.error}</span>
            </p>
        #{/field}         
         
         
        #{field 'endereco.bairro'}
            <p class="${field.errorClass}">
                 <input type="text" name="${field.name}" value="${endereco?.bairro}" id="bairro" placeholder="Bairro" autocomplete="off" class="caixaMedia" required>
                 <span class="error">${field.error}</span>
            </p>
        #{/field}         
         
         
        #{field 'endereco.rua'}
            <p class="${field.errorClass}">
                <input type="text" name="${field.name}" value="${endereco?.rua}" id="rua" class="caixaMedia" placeholder="Rua" autocomplete="off" >
                <span class="error">${field.error}</span>
            </p>
        #{/field}   
        
        #{field 'endereco.numero'}
            <p class="${field.errorClass}">
                <input type="text" name="${field.name}" value="${endereco?.numero}" id="numero" class="caixaPequena" placeholder="N°" autocomplete="off" >
                <span class="error">${field.error}</span>
            </p>
        #{/field} 
        
                #{field 'endereco.complemento'}
            <p class="${field.errorClass}">
                <input type="text" name="${field.name}" value="${endereco?.complemento}" id="rua" class="caixaMedia" placeholder="Complemento" autocomplete="off" >
                <span class="error">${field.error}</span>
            </p>
        #{/field}        
                  
        #{field 'endereco.cep'}
           <p class="${field.errorClass}">
               <input type="text" name="${field.name}" value="${endereco?.cep}" id="cep" placeholder="CEP" autocomplete="off" class="caixaMedia" required>
               <span class="error">${field.error}</span>
           </p>
           
        #{/field}              
                                            
         </section>

    </div>
      
    <section id="buttons">
        <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Limpar">
        <input type="submit" name="submit" id="submitbtn" class="submitbtn" value="Enviar">
        <br style="clear:both;">
    </section>
    #{/form}
    
</section>

</body>
</html>



<script>
	$(document).ready(function(){
		$("#telefone1").mask("(99)9999-9999");
		$("#telefone2").mask("(99)9999-9999");
		$("#cep").mask("99999-999");
	});
</script>

